<template>
  <div>
    <basic-page-vxe
      ref="basePage"
      list-api="querySysMenu"
      del-api="deleteSysMenu"
      export-api="exportSysMenu"
      :export-name="$route.meta.title"
      :search-form="basicData.searchForm"
      :search-handle="basicData.searchHandle"
      :columns="basicData.columns"
      :show-pagination="false"
      :is-tree-data="true"
    />
    <!--新增-->
    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" :inline="true" label-position="right" label-width="90px" style="width: 100%">
        <el-form-item label="菜单编码" prop="menuCode">
          <el-input v-model="temp.menuCode" placeholder="请输入" :disabled="dialogStatus==='update'" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="temp.menuName" placeholder="请输入" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="菜单图标" prop="menuIcon">
          <el-select v-model="temp.menuIcon" filterable placeholder="请输入" maxlength="32" clearable>
            <el-option
              v-for="item in menuIcon"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            >
              <i :class="item.value" />
              <span style="float: right; color: #8492a6; font-size: 16px">{{ item.value }}</span>
            </el-option>
          </el-select>
          <i :class="temp.menuIcon" style="margin-left: 10px" />
        </el-form-item>
        <el-form-item label="菜单路由" prop="menuPath">
          <el-input v-model="temp.menuPath" placeholder="请输入" maxlength="512" clearable />
        </el-form-item>
        <el-form-item label="菜单组件" prop="menuComponent">
          <el-input v-model="temp.menuComponent" placeholder="请输入" maxlength="256" clearable />
        </el-form-item>
        <el-form-item label="菜单排序" prop="menuSequence">
          <el-input-number v-model="temp.menuSequence" placeholder="请输入" :min="1" />
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentId">
          <el-tooltip content="如不选择默认为根节点" placement="bottom" effect="light">
            <el-select ref="selectParentId" v-model="temp.parentId" placeholder="请选择" style="width: 100%" clearable @clear="handleClearParentId">
              <el-option :key="temp.parentId" hidden :value="temp.parentId" :label="parentName" />
              <el-tree ref="treeParentId" node-key="id" :data="parentIdOptions" :props="{label: 'title'}" :expand-on-click-node="false" :check-on-click-node="true" @node-click="handleNodeClickParentId" />
            </el-select>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="菜单状态" prop="menuStatus">
          <el-radio-group v-model="temp.menuStatus">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单按钮" prop="menuButton">
          <el-checkbox-group v-model="checkedMenuButtonList">
            <el-checkbox v-for="item in menuButtonList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addSysMenu, updateSysMenu, querySysMenuTree, queryMenuButtonCheckbox, queryCheckedMenuButton } from '@/api/admin'
export default {
  name: '',
  components: {
  },
  directives: {},
  filters: {},
  data() {
    return {
      basicData: {
        columns: [
          { config: { title: '菜单名称', field: 'menuName' }, type: 'tree' },
          { config: { title: '菜单编码', field: 'menuCode' }},
          { config: { title: '菜单图标', field: 'menuIcon', align: 'center', width: '100px' },
            type: 'render',
            render: (h, scope) => {
              return (
                <div style='display: inline-block'>
                  <i class={scope.row.menuIcon}></i>
                </div>
              )
            }
          },
          { config: { title: '菜单路由', field: 'menuPath' }},
          { config: { title: '菜单排序', field: 'menuSequence' }},
          { config: { title: '菜单状态', field: 'menuStatus', width: 70 }, type: 'render',
            render: (h, scope) => {
              if (scope.row.menuStatus === 1) {
                return (
                  <el-tag effect='plain' type='success'>显示</el-tag>
                )
              } else {
                return (
                  <el-tag effect='plain' type='danger'>隐藏</el-tag>
                )
              }
            } },
          { config: { title: '操作', width: '180', field: 'opt' }, type: 'render',
            render: (h, scope) => {
              return (
                <div>
                  <el-button plain size='mini' type='primary' v-permission="'update'" onClick={() => this.handleUpdate(scope.row)}><i class='el-icon-edit'></i> 编辑</el-button>
                  <el-button plain size='mini' type='danger' v-permission="'delete'" onClick={() => this.$refs.basePage.handleDelete(scope.row)}><i class='el-icon-delete'></i> 删除</el-button>
                </div>
              )
            }
          }
        ],
        searchData: {},
        searchForm: [
          { type: 'Input', label: '菜单名称', prop: 'menuName', width: '180px' },
          { type: 'Input', label: '菜单路由', prop: 'menuPath', width: '180px' }
        ],
        searchHandle: [
          { label: '新增', type: 'success', icon: 'el-icon-plus', permission: 'add', handle: () => { this.handleCreate() } }
        ]

      },
      parentIdOptions: [],
      parentName: '',
      checkedMenuButtonList: [],
      menuButtonList: [],
      temp: {
        id: undefined,
        menuStatus: 1
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      rules: {
        menuCode: [{ required: true, message: '请输入菜单编码！', trigger: ['blur', 'change'] }],
        menuName: [{ required: true, message: '请输入菜单名称！', trigger: ['blur', 'change'] }],
        menuPath: [{ required: true, message: '请输入菜单路由！', trigger: 'change' }],
        menuStatus: [{ required: true, message: '请选择菜单状态！', trigger: 'change' }]
      },
      downloadLoading: false,
      menuIcon: [
        { value: 'co-icon-home' }, { value: 'co-icon-gongzuotaishouye' }, { value: 'co-icon-message' },
        { value: 'co-icon-ai60' }, { value: 'co-icon-s-promotion' }, { value: 'co-icon-liucheng' },
        { value: 'co-icon-yingyongguanli' }, { value: 'co-icon-well-drilling' },
        { value: 'co-icon-weibiaoti11' }, { value: 'co-icon-yanjiuyuan' }, { value: 'co-icon-dingyishitu' },
        { value: 'co-icon-caidanguanli' }, { value: 'co-icon-keyan' },
        { value: 'co-icon-jingjixiaoyi-zhuituidianfei-' }, { value: 'co-icon-zhoubao' }, { value: 'co-icon-qianshoushenpitongguo' },
        { value: 'co-icon-jinzhan' }, { value: 'co-icon-zidianguanli' },
        { value: 'co-icon-shili' }, { value: 'co-icon-wenjian' }, { value: 'co-icon-shujuquanxianguanli' },
        { value: 'co-icon-jigouguanli' }, { value: 'co-icon-moxing' },
        { value: 'co-icon-yunhang' }, { value: 'co-icon-xitongguanli' }, { value: 'co-icon-jichuxinxiguanli' },
        { value: 'co-icon-guihuaicon' }, { value: 'co-icon-daiban' }, { value: 'co-icon-quanxian' },
        { value: 'co-icon-gongzuoliu' }, { value: 'co-icon-xiaoguo' },
        { value: 'co-icon-yujing' }, { value: 'co-icon-eryanghuatan' }, { value: 'co-icon-youjing' },
        { value: 'co-icon-jiaoseguanli' }, { value: 'co-icon-shujuku' }, { value: 'co-icon-yonghuguanli' },
        { value: 'co-icon-huiyijiyao' }, { value: 'co-icon-waixieketi' }, { value: 'co-icon-jiekou' },
        { value: 'co-icon-jianceshi' }, { value: 'co-icon-wodeyiban' }, { value: 'co-icon-zhengce' },
        { value: 'co-icon-bushu' }, { value: 'co-icon-quyuguanli' },
        { value: 'co-icon-zonghexiaoyi' }, { value: 'co-icon-jishuchengguo' }, { value: 'co-icon-xietong' },
        { value: 'co-icon-header-14' }, { value: 'co-icon-shiyan' }, { value: 'co-icon-xiaoxitongzhi' },
        { value: 'co-icon-gongyitu' }, { value: 'co-icon-jingtong' }, { value: 'co-icon-sheji' },
        { value: 'co-icon-wenjianshangchuanxiazai' }, { value: 'co-icon-liuchengtu' },
        { value: 'co-icon-500' }, { value: 'co-icon-geren12' }, { value: 'co-icon-flow' },
        { value: 'co-icon-person' }, { value: 'co-icon--instagram' }, { value: 'co-icon-mobankuangjia' },
        { value: 'co-icon-tubiao' }, { value: 'co-icon-guochengguanli' }, { value: 'co-icon-fanganguanli' },
        { value: 'co-icon-zhuce' }, { value: 'co-icon-zuhu' }, { value: 'co-icon-peizhi' },
        { value: 'co-icon-daima' }, { value: 'co-icon-NormalCopy' }, { value: 'co-icon-fenzu' },
        { value: 'co-icon-wendang' }, { value: 'co-icon-yichang' }, { value: 'co-icon-jiankong' },
        { value: 'co-icon-zuhu1' }, { value: 'co-icon-404' }, { value: 'co-icon-fenbushi' },
        { value: 'co-icon-fenxi5' }, { value: 'co-icon-qiyeyanfaxinxi' }, { value: 'co-icon-renwujianying' },
        { value: 'co-icon-renwulishi' }, { value: 'co-icon-lishi1' }
      ]
    }
  },
  computed: {},
  created() {
    this.getType()
  },
  mounted() {
  },
  methods: {
    // 业务逻辑
    getType() {
      querySysMenuTree().then(response => {
        this.parentIdOptions = response.data
      })
      queryMenuButtonCheckbox().then(response => {
        this.menuButtonList = response.data
      })
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        menuStatus: 1
      }
    },
    handleCreate() {
      this.resetTemp()
      this.parentName = ''
      this.checkedMenuButtonList = []
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      if (this.$refs.selectParentId.value) {
        this.validateParentId()
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.temp.parentId === undefined) {
            this.temp.parentId = 0
          }
          this.temp.menuButton = this.checkedMenuButtonList
          addSysMenu(this.temp).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
        if (this.temp.parentId === '0') {
          this.parentName = '请选择'
        } else {
          this.parentName = this.$refs.treeParentId.getNode(this.temp.parentId).label
        }
      })
      queryCheckedMenuButton(this.temp.menuCode).then(response => {
        this.checkedMenuButtonList = response.data
      })
    },
    updateData() {
      if (this.$refs.selectParentId.value) {
        this.validateParentId()
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // const tempData = Object.assign({}, this.temp)
          const tempData = {}
          tempData.id = this.temp.id
          tempData.menuCode = this.temp.menuCode
          tempData.menuName = this.temp.menuName
          tempData.menuIcon = this.temp.menuIcon
          tempData.menuPath = this.temp.menuPath
          tempData.menuComponent = this.temp.menuComponent
          tempData.menuSequence = this.temp.menuSequence
          tempData.menuStatus = this.temp.menuStatus
          tempData.parentId = this.temp.parentId ? this.temp.parentId : 0
          tempData.menuButton = this.checkedMenuButtonList
          updateSysMenu(tempData).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    // 刷新
    handleReset() {
      this.getType()
      this.$refs.basePage.getList()
    },
    validateParentId() {
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate('parentId')
      })
    },
    handleNodeClickParentId(data) {
      this.parentName = data.title
      this.temp.parentId = data.id
      this.$refs.selectParentId.blur()
      this.validateParentId()
    },
    handleClearParentId() {
      this.parentName = ''
      this.temp.parentId = ''
    }
  }
}
</script>

<style scoped>
  .warning{
    text-align: center;
    font-size: 20px;
  }
  .el-icon-info{
    font-size: 30px;
    color: orange;
  }
</style>
